<template>
	<view class="video-detail">
		<view class="video-content" v-if="classDeatil.url_video">
			<video id="myVideo" :src="classDeatil.url_video" @error="videoErrorCallback" controls @play="playVideo"
				show-mute-btn :initial-time="initialTime" :title="classDeatil.name" autoplay ref="videos"
				enable-progress-gesture="false" auto-pause-if-navigate="true" @timeupdate="timeupdate"></video>
		</view>
		<uniTabs :tabs="tabs" :value="activeTab" lineHeight="false" @change="change" activeColor="#DD524D" class="tabs"></uniTabs>
		<view v-if="activeTab==0" style="padding: 20rpx 36rpx;line-height: 50rpx;text-indent: 2em;">
			{{classDeatil.name}}
		</view>
		<view v-else-if="activeTab==1" class="childlist">
			<view class="item" v-for="(item,index) in child" :key="index" @click="childClick(item.id)">
				<class-list-item :row="item"></class-list-item>
			</view>
		</view>
		<view v-else class="list">
			<view class="item" v-for="(item,index) in rimlist" :key="index" @click="childClick1(item.id)">
				<view class="video-item-image" :style="{'background-image':`url(https://jsjhj.net${item.image})`}">
					<image src="../../../static/image/play.png" mode=""></image>
				</view>
				<text>《{{item.name}}》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getClassDetail,
		writeVideoClick,
		videoHistoryMemory,
		videoHistoryList
	} from '@/static/js/api/home.js';
	import ClassListItem from './components/ClassListItem.vue'
	import uniTabs from '@/components/v-tabs/v-tabs.vue'
	import request from '@/static/js/request.js'
	export default {
		data() {
			return {
				classDeatil: {},
				id: '',
				initialTime: 0, //初始播放位置
				currentTime: 0,
				lang: 0, //视频时长
				activeTab: 2,
				tabs: ['简介', '共10期', '推荐视频'],
				child: [],
				rimlist: [],
				timer: null
			}
		},
		components: {
			uniTabs,
			ClassListItem
		},
		onLoad(option) {
			this.id = option.id;
		},
		onShow() {
			this.getClassDetail();
			writeVideoClick(this.id).then(res => {})
			if (uni.getStorageSync('userInfo')) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				var uid = userInfo.uid;
				this.videoHistoryList(uid)
			}
		},
		forbidDragProgress(res) {
			let time = res.detail.currentTime;
			if ((time - this.videoCurrentTime).toFixed(3) > 2) {
				let nowtime = this.videoCurrentTime.toFixed(0);
				this.videoContext.seek(nowtime);
			} else {
				this.videoCurrentTime = time;
			}
		},
		beforeDestroy() {
			this.timer = null
			if (uni.getStorageSync('userInfo')) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				if (userInfo && userInfo.uid) {
					this.currentTime = this.currentTime > 1 ? this.currentTime.toFixed(0) : '1'
					videoHistoryMemory(this.id, this.currentTime, userInfo.uid, this.lang).then(res => {})
				}
			} else {
				this.currentTime = this.currentTime > 1 ? this.currentTime.toFixed(0) : '1'
				uni.setStorageSync('currentTime', this.currentTime)
			}

		},
		methods: {
			getClassDetail() {
				uni.showLoading({
					title: '正在加载...'
				})
				if (uni.getStorageSync('userInfo')) {
					let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
					getClassDetail(userInfo.uid, this.id).then(res => {
						this.classDeatil = res.data[0];
						var branch = res.data[0].snewstitle.split(':')[0] * 60
						var second = res.data[0].snewstitle.split(':')[1];
						this.lang = parseInt(branch) + parseInt(second)
						this.tabs[1] = res.data[0].number
						this.child = res.data[0].child
						res.data[0].rim.forEach(item => {
							item.name = item.name.replace(/—/g, '-')
							this.rimlist.push(item)
						})
						this.initialTime = res.time == this.lang ? '0' : res.time
						uni.hideLoading()
					})
				} else {
					getClassDetail('', this.id).then(res => {
						this.classDeatil = res.data[0];
						var branch = res.data[0].snewstitle.split(':')[0] * 60
						var second = res.data[0].snewstitle.split(':')[1];
						this.lang = parseInt(branch) + parseInt(second)
						this.tabs[1] = res.data[0].number
						this.child = res.data[0].child
						res.data[0].rim.forEach(item => {
							item.name = item.name.replace(/—/g, '-')
							this.rimlist.push(item)
						})

						if (uni.getStorageSync('currentTime')) {
							this.initialTime = uni.getStorageSync('currentTime')
						} else {
							this.initialTime = res.time
						}
						uni.hideLoading()
					})
				}

			},
			videoHistoryList(uid) {
				videoHistoryList(uid).then(res => {
					
				})
			},
			videoErrorCallback(e) {
				console.log(e)

			},
			playVideo(e) {
				
			},
			timeupdate(e) {
				this.currentTime = currentTime;
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime)
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
				} else {
					var jump_time = parseInt(that.video_real_time)
				}
				if (isReady == 1) {
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						let videoContext = wx.createVideoContext('myVideo')
						videoContext.seek(that.video_real_time)
						wx.showToast({
							title: '未完整看完该视频，不能快进',
							icon: 'none',
							duration: 2000,
						})
					}
				}
				that.video_real_time = currentTime //实时播放进度
				this.currentTime = currentTime
				if (this.currentTime.toFixed(0) == this.lang) {
					let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
					if (userInfo && userInfo.uid) {
						this.currentTime = this.currentTime > 1 ? this.currentTime.toFixed(0) : '1'
						videoHistoryMemory(this.id, this.currentTime, userInfo.uid, this.lang).then(res => {})
					}
				}
			},
			change(index) {
				this.activeTab = index
			},
			childClick(id) {
				uni.navigateTo({
					url: `/pages/home/class/ClassDetailPage?id=${id}`
				})
			},
			childClick1(id) {
				uni.navigateTo({
					url: `/pages/home/class/ClassDetailPage?id=${id}`
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.video-detail {
		height: 100vh;

		.video-content {
			#myVideo {
				width: 100%;
				height: 436rpx;
			}

			.playback-times {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin: 32rpx 0rpx 0rpx 30rpx;
			}
		}

		.brief-introduction {
			margin: 26rpx 30rpx;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
			}

			.introduction {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding-bottom: 20rpx;

			&:after {
				content: '';
				width: 30%;
			}

			.item {
				width: 30%;
				margin-top: 20rpx;

				.video-item-image {
					width: 226rpx;
					height: 168rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				text {
					color: #7B7B7B;
				}
			}

		}

		.childlist {
			.video-item {
				display: flex;
				align-items: center;
				background: #fff;
				padding: 20rpx 30rpx 20rpx 30rpx;
				margin-bottom: 20rpx;

				.video-item-image {
					width: 226rpx;
					height: 168rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.video-content {
					flex: 1;
					margin-left: 23rpx;

					.video-word {
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						margin-bottom: 8rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
						line-height: 44rpx;
					}

					.video-label {
						display: flex;
						margin-bottom: 35rpx;

						.label-name {}

						.video-date {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
							flex: 1;
							text-align: right;
						}
					}

					.video-remarks {
						display: flex;
						text-align: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;

						.video-time {
							flex: 1;
							text-align: left;
						}

						.video-eye {
							width: 30rpx;
							height: 22rpx;
							margin-right: 14rpx;
						}

						.video-value {

							color: #999999;
						}
					}
				}
			}
		}
	}

	.tabs {
		position: relative;
	}

	/deep/ .v-tabs {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		line-height: 100rpx;
	}

	/deep/ .v-tabs__container-item {
		width: 50%;
		justify-content: center;
	}
</style>
